<template>
   <div id="goods-box"> 

   <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"  data-interval="1500" >
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="../images/goods3.jpeg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="../images/goods1.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    
     <div class="item">
      <img src="../images/goods2.jpg" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

     <div class="mui-card">
				<div class="mui-card-header">iPhone X 256G 全网通(中关村)</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价: <del>¥8999.00</del> &nbsp;&nbsp;销售价: <span>¥6999.00</span>
                        </p>
                        <p>购买数量:</p>
                        <mt-button type="primary" size="small" > 立即购买</mt-button>
                        <mt-button type="danger" size="small" >加入购物车</mt-button>
					</div>
				</div>
				
			</div>


        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						

				<div id="J_Attrs" class="J_DetailSection">
	        <h4 class="hd">规格参数</h4>
	              
        
        	    <table class="tm-tableAttr">
            <thead>
                <tr>
                    <td colspan="2">包装清单</td>
                </tr>
            </thead>
            <tbody>
            	                <tr>
                	<th>红辣椒7R手机</th>
                	<td>1 件</td>
                </tr>
                                <tr>
                	<th>电源适配器</th>
                	<td>1 件</td>
                </tr>
                                <tr>
                	<th>USB数据线</th>
                	<td>1 件</td>
                </tr>
                                <tr>
                	<th>SIM卡插针</th>
                	<td>1 件</td>
                </tr>
                                <tr>
                	<th>售后服务手册</th>
                	<td>1 件</td>
                </tr>
                                <tr>
                	<th>保护套</th>
                	<td>1 件</td>
                </tr>
                                <tr>
                	<th>钢化膜</th>
                	<td>1 件</td>
                </tr>
                            </tbody>
        </table>
    	    </div>



					</div>
				</div>
				<div class="mui-card-footer">页脚</div>
			</div>



  <el-steps :active="active" finish-status="success">
  <el-step title="步骤 1"></el-step>
  <el-step title="步骤 2"></el-step>
  <el-step title="步骤 3"></el-step>
</el-steps>

<el-button style="margin-top: 12px;" @click="next">下一步</el-button>

   </div>
</template>

<script>
export default {
    data(){
        return  {
                active:0
        }
    },
    methods:{
            next() {
        if (this.active++ > 2) this.active = 0;
      }
 
    }

}
</script>

<style>

#img11{
    width: 100%;
    height: 100%;
}
#goods-box{
    padding-bottom: 50px;
}

</style>
